<template>
  <div>
    <el-form ref="ruleFormRef" :model="form" :rules="rules" label-width="auto" class="demo-ruleForm" status-icon>
      <el-form-item label="监控报警名称" prop="amName">
        <el-input v-model="form.amName" />
      </el-form-item>
      <el-form-item label="监控报警描述" prop="amDescription">
        <el-input v-model="form.amDescription" type="textarea" />
      </el-form-item>
      <el-form-item label="报警表达式" prop="amExpression">
        <el-input v-model="form.amExpression" />
      </el-form-item>
      <el-form-item label="间隔" prop="amFor">
        <el-input v-model="form.amFor" />
      </el-form-item>
      <el-form-item label="报警信息标题" prop="amInfotitle">
        <el-input v-model="form.amInfotitle" />
      </el-form-item>
      <el-form-item label="报警信息描述" prop="amInfodis">
        <el-input v-model="form.amInfodis" type="textarea" />
      </el-form-item>
      <el-form-item label="报警等级" prop="amRank">
        <el-select v-model="form.amRank" placeholder="报警等级" clearable>
            <el-option v-for="dict in police_warn_level" :key="dict.value" :label="dict.label" :value="dict.value" />
        </el-select>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { addConfigAPI, upDataConfigAPI } from '@/api/police/config/index'

const { proxy } = getCurrentInstance() as ComponentInternalInstance
const { police_warn_level } = toRefs<any>(proxy?.useDict("police_warn_level"));

const ruleFormRef = ref<ElFormInstance>();

const props= defineProps({
  modelValue:{
    type: Object,
    default: function() {
      return {}
    }
  }
})

const emits = defineEmits(['updata:modelValue', 'resetForm'])
const form = computed({
  get() {
    return props.modelValue
  },
  set(val) {
    emits('updata:modelValue', val)
  }
})

const data = reactive({
  rules: {
    // name: [
    //   { required: true, message: 'Please input Activity name', trigger: 'blur' },
    //   { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' }
    // ]
    amName: [ { required: true, message: '名称不能为空', trigger: 'blur' } ],
    amDescription: [ { required: true, message: '报警描述不能为空', trigger: 'blur' } ],
    amExpression: [ { required: true, message: '表达式不能为空', trigger: 'blur' } ],
    amFor: [ { required: true, message: '间隔不能为空', trigger: 'blur' } ],
    amInfotitle: [ { required: true, message: '标题不能为空', trigger: 'blur' } ],
    amInfodis: [ { required: true, message: '信息描述不能为空', trigger: 'blur' } ],
    amRank: [ { required: true, message: '等级不能为空', trigger: 'blur' } ],
  }
});

const { rules } = toRefs(data);

function submitForm() {
  ruleFormRef.value?.validate(async (valid:boolean) => {
    if(valid) {
      let reset = true
      if(form.value.amId) {
        const res = await upDataConfigAPI(form.value)
        if(res.code == 200) {
          ElMessage.success("配置修改成功")
        } else {
          ElMessage.error(res.msg)
          reset = false
        }
      } else {
        const res = await addConfigAPI(form.value)
        if(res.code == 200) {
          ElMessage.success("配置添加成功")
        } else {
          ElMessage.error(res.msg)
          reset = false
        }
      }
      if (reset) {
        emits("resetForm")
        ruleFormRef.value?.resetFields();
        ruleFormRef.value?.clearValidate();
      }
    }
  })
}

defineExpose({
  submitForm
})

</script>

<style scoped>
</style>